<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片切换</title>
  <link href="../css/index.css" rel="stylesheet"/>

  <style>
      .imgSmall {
          width: 70%;
      }
  </style>
</head>
<body>

  <div id="mask">
    <div class="center">
      <h2 class="title">
        llhuang10
      </h2>
      <img :src="imgArr[index]" alt="" class="imgSmall">

      <a @click="prev" class="left" href="javaScript:;" v-show="index!==0">
        <img alt="" class="imgSmall" src="../img/prev.png">
      </a>
      <a @click="next" class="right" href="javaScript:;" v-show="index < imgArr.length - 1">
        <img alt="" class="imgSmall" src="../img/next.png">
      </a>
    </div>
  </div>


</body>
<!--<script src="js/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

  var vm = new Vue({
    el: '#mask',
    data: {
      index: 0,
      imgArr: ['../img/github.png',
        '../img/github02.png',
        '../img/github03.jpg',
        '../img/github04.jpg',
        '../img/github05.jpg']
    },
    methods: {
      prev() {
        if (this.index !== 0) {
          this.index--;
        }
      },
      next() {
        if (this.index < this.imgArr.length - 1) {
          this.index++;
        }
      }
    }
  });

  new Vue({
    el: '#app',
    data: {
      styleObject: {
        color: 'green',
        fontSize: '30px',
        background: 'red'
      },
      activeColor: 'green',
      fontSize: "30px"
    },
    styleObj1: {
      color: 'red'
    },
    styleObj2: {
      fontSize: '30px'
    }
  })
</script>
</html>
